<template>
	<view class="flex items-center pl-12px">
		<view @click="onThemeConfigChange" class="flex items-center">
			<dx-icon color="#96989d" :name="themeStore.isCollapse ? 'menu-fold-one' : 'menu-unfold-one'"></dx-icon>
		</view>
		<el-breadcrumb class="ml-12px" v-if="themeStore.isShowBreadcrumb && showLeftWindow">
			<transition-group name="breadcrumb">
				<el-breadcrumb-item v-for="(v, k) in routeStore.breadcrumbList" :key="v.menu_id">
					<view v-if="k === routeStore.breadcrumbList.length - 1" class="flex items-center cursor-pointer">
						<dx-icon color="#96989d" class="mr-5px" size="16" v-if="themeStore.isShowBreadcrumbIcon" :name="v.icon"></dx-icon>
						<view class="tags-name">{{ v.name }}</view>
					</view>
					<view v-else @click.prevent="onBreadcrumbClick(v)" class="flex items-center cursor-pointer">
						<dx-icon color="#96989d" class="mr-5px" size="16" v-if="themeStore.isShowBreadcrumbIcon" :name="v.icon"></dx-icon>
						<view class="tags-name">{{ v.name }}</view>
					</view>
				</el-breadcrumb-item>
			</transition-group>
		</el-breadcrumb>
	</view>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
const themeStore = useThemeStore();
const routeStore = useRouteStore();
const props = defineProps<{
	showLeftWindow: Boolean;
}>();
function onThemeConfigChange() {
	if (props.showLeftWindow) {
		themeStore.setIsCollapse();
	} else {
		themeStore.setShowLeftMenu();
	}
}
function onBreadcrumbClick(route: any) {
	if(!route.parent_id) return;
}
</script>
<style lang="scss" scoped>
.tags-name {
	color: #96989d;
}
</style>
